<script setup>
import { ref, onActivated } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import KWMusic from './components/KWMusic.vue'
import WYYMusic from './components/WYYMusic.vue'
// import { useHistoryStore } from '@/stores'
// 路由对象
const router = useRouter()
// 路由参数对象
const route = useRoute()
// 搜索来源
const source = ref(0)
// 切换搜索来源
// const onChangeSource = () => {
//   console.log(source.value)
// }

const queryKey = ref('')

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时

  queryKey.value = route.query.search
  console.log(queryKey.value)
})
const moreModeRef = ref(null)
const onMore = (item) => {
  moreModeRef.value.showMoreMode()
  moreModeRef.value.initInfo({ ...item })
}
</script>
<template>
  <div class="search-list">
    <van-nav-bar
      fixed
      title="音乐列表"
      left-arrow
      @click-left="router.go(-1)"
    />
    <van-sticky :offset-top="46">
      <!-- 搜索框 -->
      <!-- @click="router.push('/search')" -->
      <!-- background="#ffffff" -->
      <van-search
        readonly
        shape="round"
        :placeholder="queryKey || '请输入搜索关键词'"
        @click="router.replace('/search')"
      />
    </van-sticky>
    <!-- swipeable -->
    <!-- @click-tab="onChangeSource" -->
    <van-tabs
      :key="queryKey"
      v-model:active="source"
      sticky
      :offset-top="100"
      lazy-render
    >
      <van-tab title="酷我">
        <KWMusic
          :queryKey="queryKey"
          :key="queryKey"
          @show-more="onMore"
        ></KWMusic>
      </van-tab>
      <!-- NetEaseCloudMusic -->
      <van-tab title="网易">
        <WYYMusic
          :queryKey="queryKey"
          :key="queryKey"
          @show-more="onMore"
        ></WYYMusic>
      </van-tab>
    </van-tabs>
    <MoreMode ref="moreModeRef"></MoreMode>
  </div>
</template>
<style scoped>
/* .search-list {
  padding-top: 46px;
} */
::v-deep .van-icon-arrow-left {
  color: var(--van-nav-bar-icon-color);
}
.van-tab__panel,
.van-tab__panel-wrapper {
  padding-top: 45px;
}
</style>
